﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../Content/Site.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery/jquery-1.11.0.min.js"></script>
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <link href="selector/jeasyui.extensions.selector.css" rel="stylesheet" />
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="../../../Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <script src="jeasyui.extensions.datagrid.getDom.js"></script>
    <script src="jeasyui.extensions.datagrid.getColumnInfo.js"></script>
    <script src="jeasyui.extensions.datagrid.findRow.js"></script>
    <script src="jeasyui.extensions.datagrid.getRowData.js"></script>
    <script src="jeasyui.extensions.datagrid.insertRow.js"></script>
    <script src="jeasyui.extensions.datagrid.appendRow.js"></script>
    <script src="jeasyui.extensions.datagrid.moveRow.js"></script>
    <script src="jeasyui.extensions.datagrid.operateRow.js"></script>
    <script src="jeasyui.extensions.datagrid.operateColumn.js"></script>
    <script src="selector/common/jeasyui.extensions.dialog.sealed.sample.js"></script>
    <script src="selector/common/jeasyui.extensions.selector.base.js"></script>
    <script src="selector/jeasyui.extensions.selector.dblDatagrid.js"></script>
    <script src="jeasyui.extensions.datagrid.columnSelector.js"></script>
    <script>
        $(function () {

            //动态列的统一宽度
            var dynamicColumnWidth = 100;

            var getFrozenColumns = function () {
                var result = [];

                var c1 = [];
                c1.push({ field: 'id', title: '主键', width: 100, configable: false });
                c1.push({ field: 'fixedColumn1', title: '固定列1(冻结)', width: 100, configable: false });

                result.push(c1);

                return result;
            };

            var getColumns = function () {
                var result = [];

                var cols1 = [
                    { field: 'fixedColumn2', title: '固定列2(常规)', width: 100, rowspan: 2, configable: false }
                ];

                //动态列
                $.array.merge(cols1, getDynamicColumns());

                //汇总列
                cols1.push({ title: '计算', width: 100, rowspan: 1, colspan: 4, configable: false });

                result.push(cols1);

                var cols2 = [
                    { field: 'calTotal', title: '总计', width: 80, configable: false },
                    { field: 'calAvg', title: '平均值', width: 80, configable: false },
                    { field: 'calMax', title: '最大值', width: 80, configable: false },
                    { field: 'calMin', title: '最小值', width: 80, configable: false }
                ];

                result.push(cols2);

                return result;
            };

            var getDynamicColumns = function () {
                var columns = [];
                $.ajax({
                    url: "datagrid-dynamic-column-data.json",
                    type: "get",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        $.array.forEach(result, function (item) {
                            columns.push({ field: item.fieldCode, title: item.fieldName, width: dynamicColumnWidth, rowspan: 2, dynamic: true });
                        });
                    }
                });

                return columns;
            };

            var options = {
                title: "列表",
                idField: "id",
                rownumbers: true,
                fit: true,
                border: false,
                singleSelect: true,
                frozenColumns: getFrozenColumns(),
                columns: getColumns(),
                method: "get",
                url: "datagrid-common-data.json"
            };

            $("#dg1").datagrid(options);

            $("#btn1").click(function () {
                $("#dg1").datagrid("openColumnSelector");
            });
        });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'north',border:false" style="height:70px;padding:15px;">
            <a id="btn1" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">打开列配置选择器</a>
        </div>
        <div data-options="region:'center',border:false" style="border-top-width:1px;border-left-width:1px;">
            <table id="dg1"></table>
        </div>
        <div data-options="region:'west',border:true,split:true" style="width:180px;">
            222
        </div>
    </div>
</body>
</html>
